﻿<link href="../../Content/Styles/button.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Styles/login.css" rel="stylesheet" type="text/css" />
@*<script src="../../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>*@
<style>
#reg
{
background-color: white;
clear: both;
overflow: hidden;
padding: 10px 5px 15px 30px;
margin-left: auto;
margin-right: auto;
border: 4px solid #EAEAEA;
border-top: none;
min-height: 500px;
width: 500px;
position: relative;

}
.editor-label {
 font-family: Tahoma;
font-size: 12px;
font-style: normal;
font-weight: bold;
letter-spacing: 0.1em;
color: #0AE;
margin-bottom: 5px;
float: left;
width: 150px;
}
.editor-field {
    padding: 0px;
}
#errorMsgReg
 {

display: none;
margin-left: 150px;
    float: left;
 color: green;
}
.field-validation-valid {
    margin-left: 150px;
    display: none;
    margin-top: -5px;
    color: green;
}
</style>
<script type="text/javascript" language="javascript">
    //even đóng dialog khi click vào nút đóng
    $('.closelogin').click(function (e) {
        //hủy bỏ các link liên kết,"bỏ dấu #"
        e.preventDefault();
        //đóng thẻ dialog
        $("#dialog").fadeOut(500);
        //đóng thẻ nền dialog
        $("#dialog_nen").fadeOut(500);
        var url = window.location.href;
        if (url.indexOf("CreateStep1") != -1) {
            window.location.href = "/Home/Index";
        }
    });
    $(document).keydown(function (e) {
        // ESCAPE key pressed
        if (e.keyCode == 27) {
            //hủy bỏ các link liên kết,"bỏ dấu #"
            e.preventDefault();
            //đóng thẻ dialog
            $("#dialog").fadeOut(500);
            //đóng thẻ nền dialog
            $("#dialog_nen").fadeOut(500);
        }
    });

 </script>
@model HomeStayWebCP.Models.BusinessObject.UserObject
@{
using (Html.BeginForm("CreateUser", "Users", FormMethod.Post, new { enctype = "multipart/form-data",id="formReg" }))
{
    @Html.ValidationSummary(true)
     <div style="position: absolute;z-index: 100;left: 500px;top: 5px;">
            <a href="#"><img src="./../../Content/images/icons/close.png" class="closelogin"  width="30px" height="30px"/></a>
        </div>
    <div id="reg" class="rounded-corners" >
        <div style="position: relative;margin-bottom: 10px">
            
            <img src=".././../Content/images/icons/homefinal.jpg" width="50px" height="50px" alt=""  style="margin-left: 150px"/>
            <p style="font-size: 18px;color: #1696C6;font-weight: bold;position: absolute;top: 20px;left: 210px;">Registation</p>
        </div>
       
       
        
        <div class="editor-label">
            UserName(*)
        </div>

        <div class="editor-field">
            @Html.TextBoxFor(model => model.Username, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Username)
        </div>
        
        <div class="editor-label">
            PassWord(*)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.Password, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Password)
        </div>
        <div class="editor-label">
            Retype PassWord(*)
        </div>
        <div class="editor-field">
            @Html.Password("RetypePassword", "", new { style = "width:250px;" })
            @Html.ValidationMessage("")
           
        </div>
        <div class="editor-label">
            Fullname(*)
           
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Fullname, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Fullname)
        </div>
        <div class="editor-label">
            AvatarPicture
        </div>
       
        <input type="file" name="test" />

        <div class="editor-label">
            Gender
        </div>
        <div class="editor-field">
            <select name="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
        </div>
        <div class="editor-label">
            Email(*)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Email, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div class="editor-label">
            Address(*)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Address, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Address)
        </div>

        <div class="editor-label">
            Phone(*)
        </div>
        <div class="editor-field"> 
            @Html.TextBoxFor(model => model.Phone, new { style = "width:250px;" })
            @Html.ValidationMessageFor(model => model.Phone)
            
        </div>
        <div class="editor-label">
            Type the result(*)
            
        </div>
        <div class="editor-field">
            <p style="float: left">
                <a> <img alt="Captcha" src="@Url.Action("CaptchaImage")" style="" /></a> 
            </p>
            @Html.TextBoxFor(model => model.Captcha, new { style = "width:120px;" })
            @Html.ValidationMessageFor(model => model.Captcha)
       
        </div>
        
        
        <p style="margin-top: 5px;clear: both;margin-left: 150px;">
            <input class="small button green"  type="submit" value="Create" style="float:left;margin-right:10px;"/>
            <input class="small button green" type="reset" value="Reset"/>
             
        </p>
       <div id="errorMsgReg"></div>
       
    </div>
       }//begin form

   
}
 
  @*    script for register*@
    <script type="text/javascript">
        //=============================
        //Fucntion check Required
        var IsvalidUser = false;
        var IsvalidEmail = false;
        var IsvalidPhone = false;
        var IsvaliPassword = false;
        var IsvalidRetypepw = false;
        var IsvalidCaptcha = false;
        var IsvalidFullname = false;
        var error = [];
        function checkrequired(form, field, error) {
            var feildvalue = $(form).find("#" + field).val();
            if (feildvalue == "") {
                $("div#errorMsgReg").css("display", "block");
                $("div#errorMsgReg").html("Please input required field");
                error[error.length] = "error";


            }



        }

        //=============================
        function CheckCaptcha(captcha) {
               $.ajax({
                    url: "/Users/CheckCaptcha",
                    type: 'POST',
                    data: { value: captcha },
                    async: false,
                    success: function (response) {
                        if (response == "Right") {

                            IsvalidCaptcha = true;
                            
                        }
                        else {
                            IsvalidCaptcha = false;
                            alert("Wrong Captcha!Please input again ");
                            
                           
                        }
                    }

                });
        }
        //==============BEGIN LOAD
        $(document).ready(function () {
            //==============LOAD FOCUS EVENT
            //==========Lost focus username

            $('#Username').live("blur", function () {
                if (!$(this).val() == "") {
                    var inputusername = $('form').find("#Username").val();
                    var currentUn = $(this).next("span");
                    $(currentUn).css("display", "none");
                    var filter = /^[a-zA-Z0-9]{6,20}$/;
                    if (!filter.test(inputusername)) {
                        $(currentUn).html("Username must be 6 to 20 characters");
                        $(currentUn).css("display", "block");
                        error[error.length] = "error";

                    }
                    else {
                        $.ajax({
                            url: "/Users/CheckExistUser",
                            type: 'POST',
                            data: { username: inputusername },
                            async: false,
                            success: function (response) {
                                //alert(response);
                                if (response == "Exist") {

                                    $(currentUn).html("User has existed");
                                    $(currentUn).css("display", "block");
                                    IsvalidUser = false;
                                }
                                else {
                                    $(currentUn).css("display", "none");
                                    IsvalidUser = true;
                                }
                            }

                        });

                    }




                }

            });
            //=======end lost focus username
            //=======lost focus type password
            $('#Password').live("blur", function () {
                if (!$(this).val() == "") {
                    var filter = /^[a-zA-Z0-9]{6,20}$/;
                    var currentUn = $(this).next("span");
                    if (!filter.test($(this).val())) {
                        $(currentUn).html("PassWord must be 6 to 20 character");
                        $(currentUn).css("display", "block");
                        IsvaliPassword = false;
                    } else {
                        $(currentUn).css("display", "none");
                        IsvaliPassword = true;

                    }


                }
            });
            //=======end lost focus type 

            //=======lost focus Phone
            $('#Phone').live("blur", function () {
                var currentUn = $(this).next("span");
                if (!$(this).val() == "") {
                    var filter = /^[0-9]{9,15}$/;
                    if (!filter.test($(this).val())) {
                        $(currentUn).html("Phone just contain number only in 10 to 20 digits");
                        $(currentUn).css("display", "block");
                        IsvalidPhone = false;
                    }
                    else {
                        $(currentUn).css("display", "none");
                        IsvalidPhone = true;

                    }

                }
            });
            //=======end lost focus type phone
            //=======lost focus Email
            $('#Email').live("blur", function () {
                var currentUn = $(this).next("span");
                var inputemail = $(this).val();
                if (!inputemail == "") {
                    var filter = /^([a-za-z0-9_\-\.]{1,10})+\@@([a-za-z0-9_\-\.]{1,10})+\.([a-za-z]{2,4})$/;
                    if (!filter.test($(this).val())) {
                        $(currentUn).html("Email has to follow right format abc@abc.com");
                        $(currentUn).css("display", "block");
                        IsvalidEmail = false;
                    }
                    else {
                        $.ajax({
                            url: "/Users/CheckEmailExist",
                            type: 'POST',
                            data: { email: inputemail },
                            success: function (response) {
                                if (response == "Exist") {

                                    $(currentUn).html("Email has existed");
                                    $(currentUn).css("display", "block");
                                    IsvalidEmail = false;
                                }
                                else {
                                    $(currentUn).css("display", "none");
                                    IsvalidEmail = true;
                                }
                            }

                        });

                    }

                }
            });
            //=======end lost focus type Email
            //=======lost focus type Fullname
            $('#Fullname').live("blur", function () {
                var currentUn = $(this).next("span");

                if (!$(this).val() == "") {
                    if ($(this).val().length > 50) {
                        $(currentUn).html("Fullname limit 50 character");
                        $(currentUn).css("display", "block");
                        IsvalidFullname = false;
                    } else {
                        $(currentUn).css("display", "none");
                        IsvalidFullname = true;
                    }


                }
            });
            //=======end lost focus type 
            //=======lost focus type Address
            $('#Address').live("keyup", function () {
                var currentUn = $(this).next("span");
                if (!$(this).val() == "") {
                    if ($(this).val().length > 255) {
                        $(currentUn).html("Address not too long");
                        $(currentUn).css("display", "block");

                    }
                    else {
                       $(currentUn).css("display", "none");
                    }

                }
            });
            $('#RetypePassword').live("blur", function () {

                var oldpass = $('#Password').val();
                var retype = $(this).val();
                var currentUn = $(this).next("span");
                if (oldpass !== retype) {

                    $(currentUn).css("display", "block");
                    $(currentUn).html("Retype password not match");
                    IsvalidRetypepw = false;

                } else {
                    (currentUn).css("display", "none");
                    IsvalidRetypepw = true;
                }



            });

            //          //===========SUBMIT 
            $('#formReg').live("submit", function () {
                error = [];
                var inputusername = $(this).find("#Username").val();
                checkrequired($(this), "Username", error); //call check username 
                checkrequired($(this), "Password", error);
                checkrequired($(this), "Fullname", error);
                checkrequired($(this), "Address", error);
                checkrequired($(this), "Phone", error);
                checkrequired($(this), "Email", error);
                checkrequired($(this), "RetypePassword", error);
                checkrequired($(this), "Captcha", error);
                if ($(this).find("#Captcha").val() != "") {
                    CheckCaptcha($(this).find("#Captcha").val());
                }
                if (error.length > 0 || IsvalidUser == false || IsvalidPhone == false || IsvalidEmail == false || IsvaliPassword == false || IsvalidRetypepw == false || IsvalidCaptcha == false || IsvalidFullname == false)
                    return false;
                if (error.length == 0 && IsvalidUser == true && IsvalidPhone == true && IsvalidEmail == true && IsvaliPassword == true && IsvalidRetypepw == true && IsvalidCaptcha == true && IsvalidFullname == true) {
                    $("div#errorMsgReg").css("display", "none");
                    return true;
                }

            });
            //==========END SUBMIT Register
            $(document).keydown(function (e) {
                // ESCAPE key pressed
                if (e.keyCode == 13) {

                }
            });
        });
        //==============END LOAD
      
       
    </script>